// ## 搜索展示页
<template>
  <div class="searchList">
    <div class="top">
      <img class="search_icon" src="../../images/icon/search.png" />
      <div class="topInput">
        <input
          type="text"
          @blur="getChangeList"
          v-model="text"
          placeholder="输入关键字搜索"
        />
        <span class="icons" @click="changeClassList" v-show="flag"
          ><img src="../../static/images/icon/search-col.png" alt=""
        /></span>
        <span class="icons" @click="changeClassList" v-show="flag2"
          ><img src="../../static/images/icon/search-col2.png" alt=""
        /></span>
      </div>
      <div class="line">
        <span :class="i === 0 ? 'active' : ''" @click="getAllList">综合</span>
        <span :class="i === 1 ? 'active' : ''" @click="getSales">销量</span>
        <span :class="i === 2 ? 'active' : ''" @click="getPrice"> 价格</span>
      </div>
    </div>
    <div :class="flag === true ? 'main' : 'main2'">
      <div
        class="lines"
        @click="searchDetail(item.prodId)"
        v-for="(item, index) in searchList"
        :key="index"
      >
        <img :src="item.pic" alt="" />
        <div class="text">
          <h3>{{ item.prodName }}</h3>
          <p>￥{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      i: 0,
      flag: true, //第一个图标
      flag2: false, //第二个图标
      text: "", //输入框内容
      arr: [], //存放历史记录
    };
  },
  mounted() {
    this.getSearchInfo(this.text); //调用异步方法 渲染出列表
  },

  computed: {
    ...mapState("search", ["searchList"]),
  },
  //接收路由跳转传递过来的参数
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.text = option.text;
    this.getSearchInfo(this.text); //调用异步方法 渲染出列表
  },
  methods: {
    ...mapMutations("search", ["getText"]),
    ...mapActions("search", ["getSalesList", "getSalesPrice", "getSearchInfo"]),
    //综合
    getAllList() {
      this.i = 0;
      this.getSearchInfo(this.text);
    },
    //销量
    getSales() {
      this.i = 1;
      this.getSalesList(this.text);
    },
    //价格
    getPrice() {
      this.i = 2;
      this.getSalesPrice(this.text);
    },
    //点击图标改变样式
    changeClassList() {
      (this.flag = !this.flag), (this.flag2 = !this.flag2);
    },
    //点击跳详情页
    searchDetail(id) {
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`
      });
    },
    //重新输入 输入框数据时 更改列表
    getChangeList() {
      this.getSearchInfo(this.text); //调用异步方法 渲染出列表
    },
  },
};
</script>

<style scoped>
.searchList {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 140rpx;
  margin: auto;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
}
.top img.search_icon {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  left: 56rpx;
  top: 28rpx;
  display: block;
}

.top .topInput {
  height: 70rpx;
  width: 100%;
  display: flex;
}
.top .topInput input {
  flex: 1;
  border-radius: 50rpx;
  background: #f7f7f7;
  width: 80%;
  text-align: center;
  font-size: 28rpx;
  margin: 0 20px;
  margin-top: 10px;
  height: 90%;
}
.top .topInput .changeClass {
  margin: 0 20rpx;
}
.top .line {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
span {
  font-size: 30rpx;
}
.active {
  color: #eb2444;
}

.main {
  height: 500rpx;
  width: 100%;
  height: 1200px;
  background: #f7f7f7;
  padding: 0 20rpx 20rpx 20rpx;
  margin-top: 140rpx;
}
.main .lines {
  display: flex;
  width: 100%;
  height: 180px;
  background: #fff;
  margin-top: 30px;
  padding: 20rpx;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
}
.main .lines .text {
  margin-left: 20rpx;
  padding-right: 20rpx;
}
.main .lines img {
  width: 40%;
  height: 100%;
}
.main .lines h3 {
  font-size: 30rpx;
}
.main .lines p {
  font-size: 28rpx;
  color: #eb2444;
  margin-top: 30rpx;
}
.main2 {
  height: 500rpx;
  width: 100%;
  height: 1200px;
  background: #f7f7f7;
  padding: 0 20rpx 20rpx 20rpx;
  margin-top: 140rpx;
}
.main2 .lines {
  float: left;
  margin-left: 20rpx;
  width: 40%;
  height: 360rpx;
  background: #fff;
  margin-top: 30px;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
}
.main2 .lines .text {
  margin-left: 20rpx;
  padding-right: 20rpx;
}
.main2 .lines img {
  width: 100%;
  height: 80%;
}
.main2 .lines h3 {
  font-size: 30rpx;
}
.main2 .lines p {
  font-size: 28rpx;
  color: #eb2444;
  margin-top: 10rpx;
}
.icons img {
  width: 38rpx;
  height: 38rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
}
</style>
